<template>
  <div class="dictionary">
    <div class="filter">
      <el-select
        v-model.lazy="bz"
        placeholder=""
        class="miniInput"
        style="width: 12%;"
      >
        <el-option
          :label="item.label"
          :value="item.value"
          v-for="item in bzOption"
          :key="item.label"
        ></el-option>
      </el-select>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div>
          <el-form-item>
            <DiySearch 
                url="/tos/dataDictionary/queryDic" 
                :id="index" 
                :tableColumnData="tableColumnData" 
                :tableData="tableData"
                @changeFdata="changeFdata(arguments,2)"
              />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getTableList({type:index})">查询全部</el-button>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="handleDelete">删除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave('edit')">保存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="db_table">
      <div class="db_table_1">
        <div
          class="db_table_1_content"
          v-for="item in xz"
          :key="item.index"
          @click="changeTable(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="db_table_2">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          height="100%"
          :cell-class-name="tableCellClassName"
          @cell-dblclick="tabClick"
          highlight-current-row 
          @current-change="handleCurrentChange"
        >
          <el-table-column
            v-for="item in tableColumnData"
            :key="item.label"
            :prop="item.props"
            :label="item.label"
          >
            <template slot-scope="scope">
              <div v-if="item.hasSelect">
                <keep-alive>
                <Select v-if="scope.row.index === tabClickRowIndex &&  scope.column.index === tabClickColumnIndex"
                  :selectTableColumnData="item.selectColumn" 
                  :optionKey="item.selectColumn[0].props"
                  :selectDefaultLabel="scope.row[item.props]"
                  placeholder="" 
                  url="/tos/dataDictionary/ediTableQuery" 
                  method="POST"
                  :params="{ mark: item.props,condition:'' }"
                  paramsKey="condition"
                  resDataMap="2"
                  :hasRemoteMethod="item.props === 'portCod' || item.props === 'cargoCod' ? true : false"
                  width="60%"
                  @changeFdata="changeFdata(arguments,1,item.props)"
                />
                
                <span v-else style="margin-left: 10px">{{
                  scope.row[item.props]
                }}</span>
                </keep-alive>
              </div>
              <div v-else>
                <span style="margin-left: 10px">{{
                  scope.row[item.props]
                }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog title="新增字典数据" :visible.sync="dialogFormVisible" width="30%" destroy-on-close>
      <el-form :model="addForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item :label="item.label" :prop="item.props" v-for="item in tableColumnMap[index]" :key="item.props">
          <Select v-if="item.hasSelect" 
            :selectTableColumnData="item.selectColumn" 
            :optionKey="item.selectColumn[0].props"
            :placeholder="'请选择' + item.label" 
            url="/tos/dataDictionary/ediTableQuery" 
            method="POST"
            :params="{ mark: item.props,condition:'' }"
            paramsKey="condition"
            resDataMap="2"
            :hasRemoteMethod="item.props === 'portCod' || item.props === 'cargoCod' ? true : false"
            @changeFdata="changeFdata(arguments,0,item)"
          />
          <el-date-picker
            v-model="addForm[item.props]"
            type="datetime"
            :disabled="item.disabled"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-else-if="item.props === 'updTim' || item.props === 'recTim'">
          </el-date-picker>
          <el-input v-model="addForm[item.props]" v-else :disabled="item.disabled"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave('add')">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/modules/EDI/index.js'
import Select from '@/components/Select/import-ship-cntr'
import DiySearch from '@/components/Select/diy-search'
import { parseTime } from '@/utils/index.js'

export default {
  name: 'ediDictionary',
  components: { Select, DiySearch },
  data() {
    return {
      bz: 'rz', // 左上角标准
      bzOption: [
        { label: '日照港', value: 'rz' },
        { label: '公共标准', value: 'ggbz' }
      ],
      // 左侧选择区域
      xz: [
        { index: '0', label: '箱型代码' },
        { index: '1', label: '港口代码' },
        { index: '2', label: '箱公司代码' },
        { index: '3', label: '残损代码' },
        { index: '4', label: '包装代码' },
        { index: '5', label: '交货条款' },
        { index: '6', label: '贸易性质' },
        { index: '7', label: '航线' },
        { index: '8', label: '货代码' },
        { index: '9', label: '特种箱标志' }
      ],
      // table头Map
      tableColumnMap: [
        [
          { label: '箱型尺寸', props: 'ediSizTyp', VO: 'EDI_SIZ_TYP', hasSelect: false, selectColumn: [] },
          { label: '对应尺寸', props: 'cntrSizCod', VO: 'CNTR_SIZ_COD ', hasSelect: true, selectColumn: [{ label: '箱尺寸代码', props: 'cntrSizCod', width: '90' }, { label: '箱尺寸名称', props: 'cntrSizNam', width: '90' }, { label: '标箱量', props: 'cntrTeu', width: '90' }, { label: '箱空重', props: 'cntrEmptWgt', width: '90' }] },
          { label: '对应箱型', props: 'cntrTypCod', VO: 'CNTR_TYP_COD', hasSelect: true, selectColumn: [{ label: '箱型代码', props: 'cntrTypCod', width: '90' }, { label: '箱型名称', props: 'cntrTypNam', width: '130' }, { label: '冷藏标志', props: 'reefId', width: '90' }, { label: '超高', props: 'overHighId', width: '90' }] },
          { label: '收发标志', props: 'sendId', VO: 'SEND_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code', width: '90' }, { label: '名称', props: 'name', width: '90' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] },
          { label: 'EDI代码标准', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: 'EDI港口', props: 'ediPortCod', VO: 'EDI_PORT_COD', hasSelect: false, selectColumn: [] },
          { label: '对应港口', props: 'portCod', VO: 'PORT_COD', hasSelect: true, selectColumn: [{ label: '箱公司代码', props: 'portCod', width: '130' }, { label: '箱公司简称', props: 'portShort', width: '130' }, { label: '中文名称', props: 'cportNam', width: '130' }, { label: '英文名称', props: 'eportNam', width: '150' }] },
          { label: '收发标志', props: 'sendId', VO: 'SEND_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code', width: '90' }, { label: '名称', props: 'name', width: '90' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] },
          { label: 'EDI代码标准', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: 'EDI箱公司', props: 'ediCntrCorpCod', VO: 'EDI_CNTR_CORP_COD ', hasSelect: false, selectColumn: [] },
          { label: '对应箱公司', props: 'cntrCorpCod', VO: 'CNTR_CORP_COD', hasSelect: true, selectColumn: [{ label: '对应箱公司', props: 'cntrCorpCod', width: '90' }, { label: '箱公司简称', props: 'cntrCorpShort', width: '90' }, { label: '中文名称', props: 'ccntrCorp', width: '160' }, { label: '英文名称', props: 'ecntrCorp', width: '120' }] },
          { label: '收发标志', props: 'sendId', VO: 'SEND_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code', width: '90' }, { label: '名称', props: 'name', width: '90' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] },
          { label: 'EDI代码标准', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: 'EDI残损代码', props: 'ediCntrDamCod', VO: 'EDI_CNTR_DAM_COD', hasSelect: false, selectColumn: [] },
          { label: '对应残损代码', props: 'cntrDamCod', VO: 'CNTR_DAM_COD', hasSelect: true, selectColumn: [{ label: '残损代码', props: 'cntrDamCod' }, { label: '残损名称', props: 'cntrDamNam' }, { label: '中文名称', props: 'ccntrDam', width: '130' }, { label: '英文名称', props: 'ecntrDam', width: '120' }] },
          { label: '收发标志', props: 'sendId', VO: 'SEND_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code' }, { label: '名称', props: 'name' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] },
          { label: 'EDI代码标准', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: 'EDI包装代码', props: 'ediPkgCod', VO: 'EDI_PKG_COD', hasSelect: false, selectColumn: [] },
          { label: '对应包装代码', props: 'pkgKindCod', VO: 'PKG_KIND_COD', hasSelect: true, selectColumn: [{ label: '类型代码', props: 'pkgKindCod' }, { label: '包装简称', props: 'pkgShort' }, { label: '中文名称', props: 'cpkgNam', width: '130' }, { label: '英文名称', props: 'epkgNam', width: '120' }] },
          { label: '收发标志', props: 'sendId', VO: 'SEND_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code' }, { label: '名称', props: 'name' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] },
          { label: 'EDI代码标准', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: '交货条款', props: 'ediDelvCod', VO: 'EDI_DELV_COD', hasSelect: false, selectColumn: [] },
          { label: '对应交货条款', props: 'delvTermCod', VO: 'DELV_TERM_COD', hasSelect: true, selectColumn: [{ label: '条款代码', props: 'delvTerm', width: '140' }, { label: '条款名称', props: 'delvTermNam', width: '120' }] },
          { label: '收发标志', props: 'sendId', VO: 'SEND_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code' }, { label: '名称', props: 'name' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] },
          { label: 'EDI代码标准', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: '数据代码', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] },
          { label: 'EDI贸易性质', props: 'ediTrade', VO: 'EDI_TRADE', hasSelect: false, selectColumn: [] },
          { label: '对应贸易性质', props: 'tradeId', VO: 'TRADE_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code', width: '130' }, { label: '名称', props: 'name' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: '数据代码', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] },
          { label: 'EDI航线', props: 'ediShipLine', VO: 'EDI_SHIP_LINE', hasSelect: false, selectColumn: [] },
          { label: '对应航线', props: 'shipLine', VO: 'SHIP_LINE', hasSelect: true, selectColumn: [{ label: '代码', props: 'shipLineCod' }, { label: '航线名', props: 'shipLineNam' }, { label: '中文名', props: 'cshipLineNam', width: '130' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: '数据代码', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] },
          { label: 'EDI货代码', props: 'ediCargoCod', VO: 'EDI_CARGO_COD', hasSelect: false, selectColumn: [] },
          { label: '货代码', props: 'cargoCod', VO: 'CARGO_COD', hasSelect: true, selectColumn: [{ label: '货代码', props: 'cargoCod', width: '130' }, { label: '货名', props: 'ccargoNam' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] }
        ],
        [
          { label: '数据代码', props: 'standardCod', VO: 'STANDARD_COD', hasSelect: false, selectColumn: [] },
          { label: 'EDI特种箱', props: 'ediCntrSpecId', VO: 'EDI_CNTR_SPEC_ID', hasSelect: false, selectColumn: [] },
          { label: '特种箱', props: 'cntrSpecId', VO: 'CNTR_SPEC_ID', hasSelect: true, selectColumn: [{ label: '代码', props: 'code' }, { label: '名称', props: 'name', width: '120' }] },
          { label: '录入员', props: 'recNam', VO: 'REC_NAM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '录入时间', props: 'recTim', VO: 'REC_TIM', hasSelect: false, selectColumn: [], disabled: true },
          { label: '修改员', props: 'updNam', VO: 'UPD_NAM', hasSelect: false, selectColumn: [] },
          { label: '修改时间', props: 'updTim', VO: 'UPD_TIM', hasSelect: false, selectColumn: [] }
        ]
      ],
      // table头部列信息
      tableColumnData: [],
      tableData: [], // 表格数据
      tableBjData: [], // 可编辑表格数据
      currentBjData: [], // 已编辑表格data
      currentRow: {
        'id': null, 'ediCod': 'RZG', 'ediSizTyp': null, 'cntrSizCod': null, 'cntrTypCod': null, 'sendId': null, 'recNam': JSON.parse(sessionStorage.getItem('userInfo')).userName, 'recTim': null, 'updNam': null, 'updTim': null, 'standardCod': null, 'ediPortCod': null, 'portCod': null, 'ediCntrCorpCod': null, 'cntrCorpCod': null, 'ediCntrDamCod': null, 'cntrDamCod': null, 'ediPkgCod': null, 'pkgKindCod': null, 'ediDelvCod': null, 'delvTermCod': null, 'ediTrade': null, 'tradeId': '1', 'ediShipLine': null, 'shipLine': null, 'ediCargoCod': null, 'cargoCod': null, 'ediCntrSpecId': null, 'cntrSpecId': null
      }, // 数据字典点击行数据
      index: '0', // 左侧选择行
      tabClickRowIndex: null, // 点击行的index
      tabClickColumnIndex: null, // 点击列的index
      formInline: {},
      dialogFormVisible: false,
      addForm: {
        'ediCod': 'RZG', 'ediSizTyp': null, 'cntrSizCod': null, 'cntrTypCod': null, 'sendId': null, 'recNam': JSON.parse(sessionStorage.getItem('userInfo')).userName, 'recTim': null, 'updNam': null, 'updTim': null, 'standardCod': null, 'ediPortCod': null, 'portCod': null, 'ediCntrCorpCod': null, 'cntrCorpCod': null, 'ediCntrDamCod': null, 'cntrDamCod': null, 'ediPkgCod': null, 'pkgKindCod': null, 'ediDelvCod': null, 'delvTermCod': null, 'ediTrade': null, 'tradeId': '1', 'ediShipLine': null, 'shipLine': null, 'ediCargoCod': null, 'cargoCod': null, 'ediCntrSpecId': null, 'cntrSpecId': null
      },
      rules: {
        standardCod: [
          { required: true, message: '请输入EDI代码标准', trigger: 'blur' },
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        pkgKindCod: [
          { required: true, message: '请输入对应包装代码', trigger: 'blur' }
        ],
        delvTermCod: [
          { required: true, message: '请输入对应交货条款', trigger: 'blur' },
          { min: 0, max: 9, message: '长度小于 9 个字符', trigger: 'blur' }
        ],
        ediSizTyp: [
          { required: true, message: '请输入箱型尺寸', trigger: 'blur' },
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        cntrSizCod: [
          { min: 0, max: 2, message: '长度小于 2 个字符', trigger: 'blur' }
        ],
        cntrTypCod: [
          { min: 0, max: 2, message: '长度小于 2 个字符', trigger: 'blur' }
        ],
        recNam: [
          { required: true, message: '请输入录入员', trigger: 'blur' },
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        updNam: [
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        sendId: [
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        ediPortCod: [
          { required: true, message: '请输入EDI港口', trigger: 'blur' },
          { min: 0, max: 10, message: '长度小于 10 个字符', trigger: 'blur' }
        ],
        portCod: [
          { min: 0, max: 6, message: '长度小于 6 个字符', trigger: 'blur' }
        ],
        ediCntrCorpCod: [
          { required: true, message: '请输入EDI箱公司', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        cntrCorpCod: [
          { required: true, message: '请输入对应箱公司', trigger: 'blur' },
          { min: 0, max: 6, message: '长度小于 6 个字符', trigger: 'blur' }
        ],
        tradeId: [
          { required: true, message: '请输入贸易性质', trigger: 'blur' },
          { min: 0, max: 1, message: '长度小于 1 个字符', trigger: 'blur' }
        ],
        ediCntrDamCod: [
          { required: true, message: '请输入EDI残损代码', trigger: 'blur' },
          { min: 0, max: 6, message: '长度小于 6 个字符', trigger: 'blur' }
        ],
        cntrDamCod: [
          { min: 0, max: 6, message: '长度小于 6 个字符', trigger: 'blur' }
        ],
        ediDelvCod: [
          { required: true, message: '请输入交货条款', trigger: 'blur' },
          { min: 0, max: 9, message: '长度小于 9 个字符', trigger: 'blur' }
        ],
        ediTrade: [
          { required: true, message: '请输入EDI贸易性质', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        ediShipLine: [
          { required: true, message: '请输入EDI航线', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        shipLine: [
          { required: true, message: '请输入对应航线', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        ediCargoCod: [
          { required: true, message: '请输入EDI货代码', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        cargoCod: [
          { required: true, message: '请输入货代码', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        ediCntrSpecId: [
          { required: true, message: '请输入EDI特种箱', trigger: 'blur' },
          { min: 0, max: 35, message: '长度小于 35 个字符', trigger: 'blur' }
        ],
        cntrSpecId: [
          { required: true, message: '请输入特种箱', trigger: 'blur' },
          { min: 0, max: 14, message: '长度小于 14 个字符', trigger: 'blur' }
        ]
      },
      hasChange: false
    };
  },
  watch: {
    tableData: {
      handler(newV, oldV) {
        if (oldV.length !== 0 && this.hasChange) {
          this.currentBjData = this.formateArrObjData(this.currentBjData, this.currentRow, 'id')
        }
      },
      deep: true
    },
    index() {
      this.hasChange = false
    }
  },
  created() {
    window.addEventListener('keydown', this.handleKeyDown, true); // 开启监听键盘按下事件
  },
  mounted() {
    this.getTableList({ type: 0 })
    this.getTableColumnList();
  },
  methods: {
    /**
     * 根据type: index获取表格数据
     */
    async getTableList(params) {
      const res = await api.reqSjzdList(params)
      sessionStorage.setItem('TABLE_' + params.type, JSON.stringify(res.data[0]))
      this.tableData = res.data[0]
      this.hasChange = false
    },
    /**
     * 根据mark: 表头对应字段 获取可编辑表格数据
     */
    async getTableBjList(params) {
      const res = await api.reqSjzdBjList(params)
      sessionStorage.setItem('TABLE_' + params.mark, JSON.stringify(res.data[0]))
      this.tableBjData = res.data[0]
    },
    /**
     * 根据Map获取对应的表头
     */
    getTableColumnList() {
      this.tableColumnData = this.tableColumnMap[0];
    },
    /**
     * 重置addForm数据
     */
    resetAddFrom() {
      this.addForm = {
        'ediCod': 'RZG', 'ediSizTyp': null, 'cntrSizCod': null, 'cntrTypCod': null, 'sendId': null, 'recNam': JSON.parse(sessionStorage.getItem('userInfo')).userName, 'recTim': null, 'updNam': null, 'updTim': null, 'standardCod': null, 'ediPortCod': null, 'portCod': null, 'ediCntrCorpCod': null, 'cntrCorpCod': null, 'ediCntrDamCod': null, 'cntrDamCod': null, 'ediPkgCod': null, 'pkgKindCod': null, 'ediDelvCod': null, 'delvTermCod': null, 'ediTrade': null, 'tradeId': '1', 'ediShipLine': null, 'shipLine': null, 'ediCargoCod': null, 'cargoCod': null, 'ediCntrSpecId': null, 'cntrSpecId': null
      }
      this.currentRow = {
        'id': null, 'ediCod': 'RZG', 'ediSizTyp': null, 'cntrSizCod': null, 'cntrTypCod': null, 'sendId': null, 'recNam': JSON.parse(sessionStorage.getItem('userInfo')).userName, 'recTim': null, 'updNam': null, 'updTim': null, 'standardCod': null, 'ediPortCod': null, 'portCod': null, 'ediCntrCorpCod': null, 'cntrCorpCod': null, 'ediCntrDamCod': null, 'cntrDamCod': null, 'ediPkgCod': null, 'pkgKindCod': null, 'ediDelvCod': null, 'delvTermCod': null, 'ediTrade': null, 'tradeId': '1', 'ediShipLine': null, 'shipLine': null, 'ediCargoCod': null, 'cargoCod': null, 'ediCntrSpecId': null, 'cntrSpecId': null
      }
      this.currentBjData = []
    },
    /**
     * 根据index改变表格数据
     */
    changeTable(item) {
      this.resetAddFrom() // 将addform置空
      this.index = item.index
      this.$bus.$emit('changeIndex', item.index) // 切换时，将缓存的tableDataAll清空。
      this.tableColumnData = this.tableColumnMap[item.index];
      const tableList = JSON.parse(sessionStorage.getItem('TABLE_' + item.index)) // 看看是否有缓存
      if (tableList === null) { // 判断是否有缓存，有缓存则走缓存，没有则发请求。
        this.getTableList({ type: item.index })
      } else {
        this.tableData = tableList
      }
      this.inputBlur()
    },
    /**
     * 数据字典表格数据 保存
     */
    async handleSave(i = 'edit') {
      if (i === 'add') {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.addForm.type = this.index
            this.addForm.id = null
            this.addForm.recTim = parseTime(new Date().getTime())
            const params = []
            params.push(this.addForm)
            api.reqSjzdAdd(params).then(res => {
              if (res.code === '00000000') {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.dialogFormVisible = false // 关闭新增框
                this.resetAddFrom() // 重置表单
                this.getTableList({ type: this.index }) // 获取新表格数据
              } else {
                // this.$message({
                //   message: '保存失败',
                //   type: 'error'
                // });
              }
            })
          } else {
            this.$message({
              message: '表单验证未通过',
              type: 'warning'
            });
            return false;
          }
        });
      } else if (i === 'edit') {
        this.currentBjData.forEach(item => {
          item.type = this.index
        })
        const res = await api.reqSjzdAdd(this.currentBjData)
        if (res.code === '00000000') {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.dialogFormVisible = false
          this.resetAddFrom()
          this.getTableList({ type: this.index })
        } else {
          // this.$message({
          //   message: '保存失败',
          //   type: 'error'
          // });
        }
      }
    },
    /**
     * 数据字典表格数据 删除
     */
    async handleDelete() {
      this.currentRow.type = this.index
      const params = []
      params.push(this.currentRow)

      if (this.currentRow.id === null) {
        this.$message({
          message: '未选择数据',
          type: 'warning'
        });
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.reqSjzdDelete(params).then(res => {
            if (res.code === '00000000') {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getTableList({ type: this.index })
              this.resetAddFrom()
            } else {
              this.$message({
                message: '删除失败',
                type: 'warning'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    // 显示点击的行
    handleCurrentChange(currentRow) {
      for (const key in currentRow) {
        this.currentRow[key] = currentRow[key];
      }
    },
    // 把每一行的索引放进row
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    tabClick(row, column, cell, event) {
      this.hasChange = true
      this.tabClickRowIndex = row.index;
      this.tabClickColumnIndex = column.index;
      // const tableList = JSON.parse(sessionStorage.getItem('TABLE_' + this.tableColumnData[this.tabClickColumnIndex].props)) // 看看是否有缓存
      // const params = { mark: this.tableColumnData[this.tabClickColumnIndex].props }
      // if (this.tableColumnData[this.tabClickColumnIndex].hasSelect) { // 如果有下拉框，走如下判断
      //   if (tableList === null) { // 判断是否有缓存，有缓存则走缓存，没有则发请求。
      //     this.getTableBjList(params)
      //   } else {
      //     this.tableBjData = tableList
      //   }
      // }
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.handleCurrentChange(this.tableData[this.tabClickRowIndex])
      this.tabClickRowIndex = null;
      this.tabClickColumnIndex = null;
    },
    // enter键事件
    handleKeyDown(e) {
      let key = null;
      if (window.event === undefined) {
        key = e.keyCode;
      } else {
        key = window.event.keyCode;
      }
      if (key === 13) {
        this.tabClickRowIndex = null;
        this.tabClickColumnIndex = null;
      }
    },
    // 子组件修改本组件的方法
    changeFdata(text, index, item) {
      console.log(text, index, '???');
      if (index === 0) {
        this.addForm[item.props] = text[0]
      } else if (index === 1) {
        console.log(item);
        this.tableData[this.tabClickRowIndex][item] = text[0]
        this.inputBlur()
      } else if (index === 2) {
        this.tableData = text[0][0]
      }
    },
    // push对象有则替换，无则添加
    formateArrObjData(initialArr, obj, pro) {
      // 判定数据是否为数组
      if (!(initialArr instanceof Array)) {
        return '请传入正确格式的数组'
      }
      // 判定数据是否为对象
      if (!(obj instanceof Object)) {
        return '请传入正确格式的对象'
      }
      if (!pro) {
        return '请传入正确格式的属性名'
      }

      const index = initialArr.findIndex((val) => val[pro] === obj[pro])
      // 如果有就替换  没有就添加
      if (initialArr.findIndex((val) => val[pro] === obj[pro]) !== -1) {
        initialArr.splice(index, 1, JSON.parse(JSON.stringify(obj)));
      } else {
        initialArr.push(JSON.parse(JSON.stringify(obj)));
      }
      return initialArr
    }
  }
};
</script>

<style lang="less" scoped>
.dictionary {
  padding: 20px;
  height: calc(100vh - 94px);
  .filter {
    width: 100%;
    display: flex;
    .el-form {
      margin-left: 15px;
    }
  }
  .db_table {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    height: calc(100% - 61px);
    .db_table_1 {
      width: 12%;
      height: 100%;
      border: 1px solid #dcdfe6;
      border-right: none;
      .db_table_1_content {
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        cursor: pointer;
        &:nth-child(even) {
          background-color: rgb(250, 250, 250);
        }
        &:nth-child(odd) {
          background-color: rgb(255, 255, 255);
        }
      }
    }
    .db_table_2 {
      width: 88%;
      height: 100%;
    }
  }
}
.demo-form-inline {
  display: flex;
  justify-content: space-between;
  width: 87%;
}
/deep/ .el-table__body tr.current-row>td {
	color: #606266;
	background: rgb(236,245,255)!important;
}
/deep/ .el-dialog__body {
    padding: 0px 20px;
}
.el-table {
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; /*滚动条宽度*/
    height: 10px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px rgba(214, 216, 221, 0) inset; /*滚动条的背景区域的内阴影*/
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    background-color: rgba(214, 216, 221, 0); /*滚动条的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px rgba(214, 216, 221, 0) inset; /*滚动条的内阴影*/
    border-radius: 10px; /*滚动条的圆角*/
    background-color: rgba(0, 0, 0, 0.15); /*滚动条的背景颜色*/
  }
}
</style>
